<template>
	<html class="no-js" lang="en">
		<body id="top">
			<section id="page-header">
				<div class="row current-cat">
					<div class="col-full">
						<h1>纪录片</h1>
					</div>
				</div>
			</section>

			<section id="bricks" class="with-top-sep">

				<div class="row masonry">

					<!-- brick-wrapper -->
					<div class="bricks-wrapper">

						<div class="grid-sizer"></div>
						
						<!-- 数据展示 -->
						<article1 v-for="item in items"
						:description='item.description' 
						:name="item.name" 
						:key='item.id'
						:id='item.id'
						:picture="item.picture"
						:flags='1'></article1>

						

					</div> <!-- end brick-wrapper -->

				</div> <!-- end row -->

				<div class="row">

					<nav class="pagination">
						<span class="page-numbers prev inactive">Prev</span>
						<span class="page-numbers current">1</span>
						<a href="#" class="page-numbers">2</a>
						<a href="#" class="page-numbers">3</a>
						<a href="#" class="page-numbers">4</a>
						<a href="#" class="page-numbers">5</a>
						<a href="#" class="page-numbers">6</a>
						<a href="#" class="page-numbers">7</a>
						<a href="#" class="page-numbers">8</a>
						<a href="#" class="page-numbers">9</a>
						<a href="#" class="page-numbers next">Next</a>
					</nav>

				</div>

			</section> <!-- bricks -->
		</body>
	</html>
</template>

<script>
	import article1 from './article/article1.vue'
	export default {
		name: 'movie',
		components:{
			article1
		},
		data() {
				return {
					items: [
						{
							id: 1,
							name: 'yyq',
							description: '123',
							picture: require('@/assets/images/thumbs/gallery/work1.jpg')
						},
						{
							id: 2,
							name: 'frank',
							description: '456',
							picture: require('@/assets/images/thumbs/gallery/work1.jpg')
						}
					]
				}
		}
	}
</script>

<style>
</style>
